<template>
  <nav>
    <v-app-bar
      flat
      app
      class="grey lighten-4 grey--text"
    >
      <!-- 导航列表显示和隐藏按钮 -->
      <v-app-bar-nav-icon
        class="grey--text"
        @click="drawer = !drawer;"
      ></v-app-bar-nav-icon>

      <!-- 网站标题 -->
      <v-toolbar-title class="text-uppercase grey--text">
        <span class="font-weight-light">rufeike</span>
        <span>Shop</span>
      </v-toolbar-title>

      <!-- 中间占位 -->
      <v-spacer></v-spacer>

      <!-- 退出按钮 -->
      <v-btn
        depressed
        class="grey--text"
      >
        <span>Sign Out</span>
        <v-icon right>exit_to_app</v-icon>
      </v-btn>
    </v-app-bar>

    <!-- 左侧导航列表 -->
    <v-navigation-drawer
      v-model="drawer"
      :mini-variant="miniVariant"
      :expand-on-hover="expandOnHover"
      app
    >
      <v-layout column align-center>
        <v-flex class="mt-5">
          <v-avatar size="100">
            <img src="/images/avatar1.png" alt="">
          </v-avatar>
        </v-flex>
          <p align-center class="subheading mt-1">
            如非客
          </p>
      </v-layout>
      <v-list>
        <v-list-item
          v-for="nav in navlist"
          :key="nav.title"
          router
          :to="nav.route"
          @click="signAction"
        >
          <v-list-item-icon>
            <v-icon>{{ nav.action }}</v-icon>
          </v-list-item-icon>
          <v-list-item-title>{{ nav.title}}</v-list-item-title>
        </v-list-item>

        <v-list-group
          v-for="item in items"
          :key="item.title"
          v-model="item.active"
          :prepend-icon="item.action"
          no-action
        >
          <template v-slot:activator>
            <v-list-item-content>
              <v-list-item-title v-text="item.title"></v-list-item-title>
            </v-list-item-content>
          </template>
          <v-list-item
            v-for="subItem in item.items"
            :key="subItem.title"
            router
            :to="subItem.route"
            @click="1"
          >
            <v-list-item-content>
              <v-list-item-title v-text="subItem.title"></v-list-item-title>
            </v-list-item-content>
          </v-list-item>
        </v-list-group>
      </v-list>
    </v-navigation-drawer>
  </nav>
</template>

<script>
export default {
  name: 'Navbar',
  data () {
    return {
      drawer: true,
      miniVariant: false,
      expandOnHover: false,
      // 一级标题
      navlist: [
        { action: 'dashboard', title: '首页', 'route': '/' },
        { action: 'folder', title: '项目', 'route': '/projects' },
        { action: 'person', title: '团队', 'route': '/team' }
      ],
      // 多级标题
      items: [
        {
          action: 'local_offer',
          title: 'vuetify例子',
          // active: true, // 选中当前
          items: [
            { title: '栅格', route: '/example/grids' },
            { title: 'New American', route: '' },
            { title: 'Sushi', route: '' }
          ]
        }
      ]
    }
  },
  methods: {
    signAction () {
      this.items = this.items.map(item => {
        item.active = false
        return item
      })
      console.log(this.items)
    }
  }
}
</script>

<style scoped>
</style>
